<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动到底同意协议示例</title>
    <style>
        .box1{
            margin: 50px auto 0;
            width: 400px;
            height: 500px;
            overflow: auto;
            background-color: aqua;
        }
        .box2{
            margin: auto;
            width: 400px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){

            //给p元素绑定一个滚动条事件
           let box1 = document.getElementById("box1");
           let inputs = document.getElementsByTagName("input");
           let submit = document.getElementById("submit");
           let confirm = document.getElementById("confirm");
            box1.onscroll = function () {
                if (this.scrollHeight - this.scrollTop === this.clientHeight){
                    for (let i = 0; i < inputs.length; i++) {
                        inputs[i].disabled = false;
                    }
                    submit.onclick = function () {
                        if (confirm.checked){
                            alert("OK")
                        }else{
                            alert("请勾选，已确认");
                        }
                    }
                }
            }

        }
    </script>
</head>
<body>
<div class="box1" id="box1">
    <p>
        这是协议，请仔细阅读并确认！<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium asperiores, atque autem doloremque eius inventore laudantium magnam maxime numquam officiis rerum saepe! Accusamus molestiae officiis provident quam vel vero.

    </p>
</div>
<div class="box2">
    <input id="confirm" type="checkbox" disabled>已确认
    <input id="submit" type="submit" disabled>
</div>
</body>
</html>